<template>
  <!-- 导航栏 -->
  <div class="top_nav">
    <nav class="pc_nav_wrap">
      <div class="logo_box">
        <div class="imgbox"></div>
        <div class="logo_txt">网易云音乐</div>
      </div>
      <ul class="nav">
        <li
          v-for="(item, index) in navList"
          :key="index"
          :class="{ active: index === current }"
          @click="navClick(index)"
        >
          {{ item }}
          <div class="sub" v-if="index === current"></div>
        </li>
      </ul>
      <div class="search_box">
        <input
          type="text"
          class="search"
          placeholder="音乐/视频/电台/用户"
          v-model="searchTitle"
          @keyup="inputChange"
          @keyup.enter="enterEvent"
        />
        <div class="user">创作者中心</div>
        <a href="#" class="login">登录</a>
        <img src="../assets/image/search.png" class="search_png" alt="" />
        <!-- 搜索 -->
        <div class="secrahBox" v-if="isSecrah">
          <div class="secrahBoxtitle">
            <span @click="checkMsg">查看"{{ searchTitle }}"全部信息></span>
          </div>
          <div class="secrahsingleBox">
            <div class="secrahsingleBoxtitle">单曲</div>
            <div class="single">
              <div v-for="(item, index) in searchList" :key="index">
                <span>{{ item.name }}</span
                >-
                <span v-for="i in item.artists" :key="i.id">{{ i.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      isSecrah: false,
      navList: ["发现音乐", "我的音乐", "朋友", "商城", "音乐人", "下载客户端"],
      current: "",
      searchTitle: "",
      searchList: [],
    };
  },
  methods: {
    //   点击导航栏变色
    navClick(index) {
      this.current = index;
      if (index == 0) {
        setTimeout(() => {
          this.$router.push({ path: "/index" }).catch((err) => {
            // 重复点击相同的url
          });
        }, 500);
      }
    },
    // 搜索防抖节流
    debounce(func, wait) {
      if (this.timeout) clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        func();
      }, wait);
    },
    // input 实时输入
    inputChange(v) {
      this.debounce(this.search, 100);
    },
    // enter事件
    enterEvent() {
      //有定时器任务，清除定时器任务，避免调用两次search方法
      if (this.timeout) clearTimeout(this.timeout);
      if (!/^[\s]*$/.test(this.searchTitle)) {
        setTimeout(() => {
          this.$router
            .push({
              path: "/secrah",
              query: {
                songName: this.searchTitle,
              },
            })
            .catch((err) => {
              // 重复点击相同的url
            });
          // window.onlode();
        }, 1000);
      }
    },
    search() {
      if (!/^[\s]*$/.test(this.searchTitle)) {
        axios({
          url: "https://autumnfish.cn/search?",
          method: "get",
          params: {
            keywords: this.searchTitle,
            limit: 5,
            type: 1,
          },
        })
          .then((res) => {
            // console.log(res.data.result.songs);
            if (res.data.result.songs) {
              this.searchList = res.data.result.songs;
              this.isSecrah = true;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.isSecrah = false;
      }
    },
    //路由跳转
    checkMsg() {
      setTimeout(() => {
        this.$router.push("/secrah");
      }, 1000);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.top_nav {
  width: 100%;
  height: 70px;
  background: #242424;
  border-bottom: 1px solid #000;
  position: relative;
}
.pc_nav_wrap {
  width: 1100px;
  margin: 0 auto;
  display: flex;
}
.logo_box {
  width: 176px;
  height: 69px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.logo_box .imgbox {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
  background: url(../assets/image/logo.jpg);
  background-size: 100% 100%;
}
.numcolor {
  color: #c10d0c;
}
.logo_txt {
  margin-left: 10px;
  color: #f8f8f8;
  font-size: 20px;
  font-family: fantasy;
  letter-spacing: 1px;
}
.nav {
  display: flex;
  height: 70px;
  color: #ccc;
}
.nav li {
  position: relative;
  /* box-sizing: border-box; */
  padding: 0 19px;
  height: 100%;
  display: flex;
  align-items: center;
  /* overflow: hidden; */
  cursor: pointer;
  font-size: 14px;
}
.search_png {
  position: absolute;
  left: 8px;
  top: 24px;
  width: 20px;
  height: 20px;
}
.sub {
  position: absolute;
  bottom: -1px;
  left: 44.5%;
  width: 0;
  height: 0;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #c20c0c transparent;
}
.search_box {
  margin-left: 80px;
  display: flex;
  height: 70px;
  align-items: center;
  position: relative;
}
.policelogo {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url(../assets/image/police.png) no-repeat;
  background-size: 100% 100%;
}
.search {
  width: 158px;
  height: 32px;
  background: #fff;
  border-radius: 32px;
  border: none;
  outline: none;
  box-sizing: border-box;
  padding: 10px 10px 10px 30px;
  font-size: 12px;
}

.user {
  margin-left: 12px;
  width: 90px;
  height: 32px;
  border: 1px solid #4f4f4f;
  border-radius: 32px;
  color: #ccc;
  text-align: center;
  line-height: 32px;
  font-size: 12px;
  cursor: pointer;
}
.login {
  margin-left: 14px;
  display: block;
  font-size: 12px;
  color: #787878;
}
.active {
  background: #000;
  color: #fff;
}
.secrahBox {
  width: 230px;
  background: #fff;
  position: absolute;
  top: 58px;
  z-index: 100000;
  border-radius: 5px;
  border: 1px solid rgb(190, 190, 190);
  box-shadow: rgb(85 85 85) 0px 4px 7px;
}
.secrahBoxtitle {
  color: rgb(204, 204, 204);
  font-size: 12px;
  padding: 10px;
  border-bottom: 1px solid rgb(183, 183, 187);
  cursor: pointer;
}
.secrahBoxtitle span {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.secrahBoxtitle span:hover {
  background: #e3e5e7;
  color: #666;
}
.secrahsingleBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.secrahsingleBoxtitle {
  display: flex;
  width: 20%;
  font-size: 12px;
  justify-content: center;
  color: rgb(204, 204, 204);
}
.single {
  font-size: 12px;
  width: 80%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgb(183, 183, 187);
}
.single div {
  display: block;
  padding: 5px 0;
  cursor: pointer;
  color: #333;
  padding-left: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.single div:first-child {
  margin-top: 10px;
}
.single div:last-child {
  margin-bottom: 10px;
}
.single div:hover {
  background: #e3e5e7;
}
</style>